iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
3
Modern Web

TypeScript + React + 雜七雜八系列 第 11

【Day 11】React Router 之稍微進階一點的用法

  • 分享至 

  • xImage
  •  

大家好,今天的篇章要介紹的是昨天的 React Router

會延續前一天的專案結構接續下去進行修改,如果沒有參與到昨天的建置過程,這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day10-react-router


登入驗證

這邊要建立一個 PrivateRoute 來讓點擊連結時會先檢查是否有登入,參考 來源

首先增加一個 PrivateRoute.tsx

+ src/router/PrivateRoute.tsx

之前剛好都沒提到為什麼沒有安裝 prop-types,來檢查 component 的 props 的型別,因為 typescript 大部分都用 interface 來取代了(當然你想要 props: { name: string } 這樣定義也行),用 interface 就不用去記 PropTypes 有提供什麼樣的函數來實作 props 型別檢查了。

這裡要注意到的是 isAuthenticated,它應該會是利用 redux 來存放驗證身分結果,不過目前還沒講解到 redux,筆者就先用主動丟 prop 的方式來做,這個 prop isAuthenticated 的使用上如果是 true 就會帶出目標 component,如果是 false 就會 redirect to="/"。

然後修改一下 Router.tsx

這裡就是 import 了剛剛做好的 PrivateRoute.tsx,將它當成 <Route /> 來使用,傳進用 useState 做的可切換 isAuthenticated。

<Route /> 所定義的 component

+ src/components/day11/Home/Home.tsx
+ src/components/day11/PrivateHome/PrivateHome.tsx

執行結果

在非登入的狀態時,如果想要進 PrivateRoute 的 '/privateHome',就會被 redirect 到 '/'


Route Config + 動態麵包屑

引入 Route Config 來做嵌套路由,參考 來源

會新增一個紀錄所有 route 的物件,然後利用 routes 包住的區塊為嵌套的 route

這邊定義的 interface 都是為了要實作 RouteWithSubRoutes,用它來接收一層一層的路由表並 render 出目標 component

(特殊說明:PrivateRoute 目前設置有點奇怪,因為目前還沒有用 Redux 來將 isAuthenticated 給管理起來,後續 redux 篇章就會將 isAuthenticated 刪掉)

在 JSX 要使用它就會這樣寫,將 routes 的第一層給 map 出來,目前第一層是 Home.tsx 會被 render,第二層的 routes 或更後面層級的就要依照你所想要使用的 layout 來放置,筆者的第二層就是寫在 Home.tsx 裡面

最後的 Router.tsx

+ src/components/day11/Home/Home.tsx
+ src/components/day11/About/About.tsx
+ src/components/day11/Blog/Blog.tsx

嵌套路由的執行結果,可以注意到 Home.tsx 是扮演 layout 的角色,筆者會利用這個特性來利用於後期的版面規劃


接下來就是動態麵包屑了,參考 來源,筆者算是也還沒有很確切的了解到可以說明的境界

就先放上筆者實驗了幾次的最終版本,想要達到只要額外定義一個 component,後續只要引入該 component 就可以有動態麵包屑的功能

要先安裝這個,react-router-config,就是從上面的參考來源中發現的函式庫,還不知道它的說明文檔在哪,所以也是一知半解,如果有人知道可以麻煩告訴我嗎? XD

npm i react-router-config
npm i -D @types/react-router-config

然後新增一個動態麵包屑的 copmonent

+ src/router/RouterBreadcrumbs.tsx

要先說到最後一行的 withRouter,簡言之可以利用它來得到最近的一次 RouteComponentProps,要注意到的是得用 HOC 的方式使用,不知道什麼時候會出 hooks 版的

然後就是 react-router-config 的 matchRoutes 會依照目前的路徑取出路由表內定義的路由,回傳一維陣列,就直接用 meterial-ui 的元件 Breadcrumbs 把陣列 map 出 JSX 囉!

將這個 RouterBreadcrumbs.tsx 給使用在 Home.tsx 裡就 OK 了

執行結果


以上就是筆者在使用 typescript + React Router 做登入驗證或動態麵包屑的一點點小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day11-react-router


明天會介紹 redux 與 typescript 究竟會擦出什麼樣的火花!


上一篇
【Day 10】React Router 之最基本的用法
下一篇
【Day 12】Redux 與 React 與 TypeScript
系列文
TypeScript + React + 雜七雜八30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言